<template>
  <div class="floating-container">
    <div
      v-for="i in 40"
      :key="i"
      class="floating-element"
      :class="[`path-${i % 4}`, `color-${i % 5}`]"
      :style="{
        left: `${Math.random() * 100}%`,
        animationDuration: `${15 + Math.random() * 20}s`,
        animationDelay: `${Math.random() * 10}s`,
        fontSize: `${14 + Math.random() * 14}px`,
      }"
    >
      {{ randomEmoji() }}
    </div>
  </div>
</template>

<script setup lang="ts">
const emojis = [
  '✨', '⭐', '🌟', '💫', '⚡', // 光效
  '🌸', '🌺', '🌼', '🌻', '🍀', // 自然
  '🎈', '🎨', '🎭', '🎪', '🎡', // 欢乐
  '💝', '💖', '💗', '💓', '💕', // 爱心
  '🦋', '🐬', '🐳', '🌈', '☁️', // 梦幻
];

const randomEmoji = () => emojis[Math.floor(Math.random() * emojis.length)];
</script>

<style scoped>
.floating-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.floating-element {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: filter 0.3s ease;
}

/* 颜色主题 */
.color-0 {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.color-1 {
  color: #FF69B4;
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}
.color-2 {
  color: #00BFFF;
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}
.color-3 {
  color: #98FB98;
  text-shadow: 0 0 10px rgba(152, 251, 152, 0.3);
}
.color-4 {
  color: #DDA0DD;
  text-shadow: 0 0 10px rgba(221, 160, 221, 0.3);
}

/* 悬停效果 */
.floating-element:hover {
  animation-play-state: paused !important;
  transform: scale(1.5) translateY(-10px);
  opacity: 1 !important;
  filter: brightness(1.3) contrast(1.1);
  z-index: 1000;
}

/* 每种颜色的悬停发光效果 */
.color-0:hover {
  text-shadow:
    0 0 15px rgba(255, 215, 0, 0.8),
    0 0 25px rgba(255, 215, 0, 0.6);
}
.color-1:hover {
  text-shadow:
    0 0 15px rgba(255, 105, 180, 0.8),
    0 0 25px rgba(255, 105, 180, 0.6);
}
.color-2:hover {
  text-shadow:
    0 0 15px rgba(0, 191, 255, 0.8),
    0 0 25px rgba(0, 191, 255, 0.6);
}
.color-3:hover {
  text-shadow:
    0 0 15px rgba(152, 251, 152, 0.8),
    0 0 25px rgba(152, 251, 152, 0.6);
}
.color-4:hover {
  text-shadow:
    0 0 15px rgba(221, 160, 221, 0.8),
    0 0 25px rgba(221, 160, 221, 0.6);
}

/* 点击效果 */
.floating-element:active {
  filter: brightness(1.8) contrast(1.2);
}

/* 为每种路径添加不同的动画时间范围 */
.path-0 {
  animation: float-straight linear infinite;
  animation-duration: 15s;  /* 基础速度 */
}
.path-1 {
  animation: float-zigzag linear infinite;
  animation-duration: 18s;  /* 稍慢 */
}
.path-2 {
  animation: float-spiral linear infinite;
  animation-duration: 20s;  /* 更慢 */
}
.path-3 {
  animation: float-wave linear infinite;
  animation-duration: 22s;  /* 最慢 */
}

/* 修改运动路径动画 */
@keyframes float-straight {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);  /* 添加完整旋转 */
    opacity: 0;
  }
}

@keyframes float-zigzag {
  0% {
    transform: translate(0, -100px) rotate(15deg);  /* 起始旋转 */
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    transform: translate(50px, 25vh) rotate(-15deg);  /* 左右摆动 */
  }
  50% {
    transform: translate(-50px, 50vh) rotate(15deg);
  }
  75% {
    transform: translate(50px, 75vh) rotate(-15deg);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 100vh) rotate(0deg);
    opacity: 0;
  }
}

@keyframes float-spiral {
  0% {
    transform: translate(0, -100px) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(0, 50vh) rotate(360deg) scale(1.2);  /* 中途放大 */
  }
  100% {
    transform: translate(0, 100vh) rotate(720deg) scale(1);  /* 恢复原始大小 */
    opacity: 0;
  }
}

@keyframes float-wave {
  0% {
    transform: translate(0, -100px) rotate(0deg) scale(0.8);  /* 起始缩小 */
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    transform: translate(30px, 25vh) rotate(90deg) scale(1.1);  /* 波浪上升放大 */
  }
  50% {
    transform: translate(0, 50vh) rotate(180deg) scale(1);
  }
  75% {
    transform: translate(-30px, 75vh) rotate(270deg) scale(1.1);  /* 波浪下降放大 */
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 100vh) rotate(360deg) scale(0.8);  /* 结束缩小 */
    opacity: 0;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .floating-element {
    font-size: 12px;
  }
}
</style>
